import FlexScrollView from '@/components/FlexScrollView';
import { useDeviceListStore } from '@/hooks';
import { GStyleSheet } from "@/utils/DarkMode";
import { View } from "@tarojs/components";
import { observer } from 'mobx-react';
import deviceShareModel from '@/models/deviceShare';
import DeviceItem from './deviceItem';
import MenuBar from './MenuBar';
import ActionButton from '@/components/ActionButton';

const dstyle = GStyleSheet.create({
  list: {
    paddingLeft: 20,
    paddingRight: 20,
  },
  container: {
    flex: 1,
    display: 'flex',
    flexDirection: 'column',
    overflow: 'hidden'
  }
});

const DeviceList = () => {
  const { data } = useDeviceListStore();
  const styles = dstyle.useDynamicStyle();

  return (
    <View style={styles.container}>
      <MenuBar />
      <FlexScrollView id='homeScrollList' scrollStyle={styles.list}>
        {data.map((device) => {
          const isShare = deviceShareModel.isShareToMeDevice(device);
          return <DeviceItem key={device.did} device={device} isShare={isShare} />
        })}
        <View style={{ height: 50 }} />
      </FlexScrollView>
      
    </View>
  );
};

export default observer(DeviceList);
